<template>
  <div>
    <!-- 回到顶部 -->
    <el-backtop :bottom="60">
      <div
        style="{
          height: 100%;
          width: 100%;
          background-color: #f2f5f6;
          box-shadow: 0 0 6px rgba(0,0,0, .12);
          text-align: center;
          line-height: 40px;
          color: #1989fa;
        }"
      >
        UP
      </div>
    </el-backtop>
    <!-- 返回上一页 -->
    <el-button @click="fanhui" type="primary">返回上一页</el-button>
    <!-- 内容 -->
    <div
      v-if="!loadings"
      v-loading="loading"
      style="padding-left: 150px; min-width: 400px; min-height: 400px"
    >
      <!-- <p style="font-size: 40px">选择</p> -->
      <el-row :gutter="12" >
        <el-col :span="8" style="width: 90%;height:100%">
          <el-card shadow="always">
            <el-form :model="data" label-width="100px">
              <el-form-item label="题目编号">
                <el-input
                  v-model="data.qid"
                  :disabled="true"
                ></el-input>
              </el-form-item>
              <el-form-item label="课程名称" style="float: left;">
                <el-select v-model="data.sid" placeholder="课程名称" :disabled="true">
                  <el-option :label="data.sid" value="shanghai"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="题目类型:" style="float: left;">
                <el-select v-model="data.tid" placeholder="题目类型" :disabled="true">
                  <el-option :label="data.tid" value="shanghai"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="难度:">
                <el-select v-model="data.nid" placeholder="难度" :disabled="true">
                  <el-option :label="data.nid" value="shanghai"></el-option>
                </el-select>
              </el-form-item>
              <el-row :gutter="12" style="width: 100%;">
                <el-col :span="8" style="width: 100%;">
                <el-card shadow="always" style="width: 100%;">

                  <el-form-item>
                    <span style="font-size: 25px;font-family:fantasy;">题目标题 :</span>
                    <div class="boxs_ti" v-html="data.title"></div>
                  </el-form-item>
              <el-form-item>
                <span style="font-size: 25px;font-family:fantasy;">答案内容 :</span>
                <div class="boxs_ti">
                  <div v-for="(v, i) of data.answerList" :key="i">
                    <span style="float: left; margin-right: 20px;">
                      答案{{ i + 1 }} 
                      :
                    </span>
                    <div
                      class="box_daan"
                      style="float: left; font-size: 20px; margin-right: 10px"
                      v-html="v.content"></div>
                    <span
                      v-if="v.isRight == 1"
                      style="color: red; float: left; font-size: 16px"
                      >正确答案</span
                    >
                    <div style="clear: both"></div>
                  </div>
                </div>
              </el-form-item>
              <el-form-item>
                <span style="font-size: 25px;font-family:fantasy;">知识点 :</span>
                <div class="boxs_ti" v-html="data.remark"></div>
              </el-form-item>
              <el-form-item>
                <span style="font-size: 25px;font-family:fantasy;">解析 :</span>
                <div class="boxs_ti" v-html="data.analysis"></div>
              </el-form-item>
                        </el-card>
                </el-col>
              </el-row>
            </el-form>            
          </el-card>
        </el-col>
      </el-row>
    </div>
    <el-empty v-if="loadings" description="暂无数据"></el-empty>
  </div>
</template>
<script>
import axios from "../../../api/home";

export default {
  data() {
    return {
      data: {},
      loading: true,
      loadings: false,
      selList: {},
      tloading: true,
      nloading: true,
    };
  },
  methods: {
    getdata() {
      axios
        .getIDti(this.$route.query.qid)
        .then((res) => {
          this.loading = false;
          console.log(res.data);
          if (res.data.code == 20000) {
            if (res.data.xiangqingDTO.qid) {
              this.data = res.data.xiangqingDTO;
              this.AList();
            } else {
              this.loadings = true;
              this.$message.error("获取数据错误");
            }
          } else {
            this.loadings = true;
            this.$message.error(res.data.msg);
          }
        })
        .catch((error) => {
          this.loading = false;
          this.loadings = true;
          this.$message.error(error.message);
        });
    },
    fanhui() {
      window.history.go(-1);
    },
    //添加下拉菜单
    AList() {
      axios
        .getTid(this.data.tid)
        .then((res) => {
          this.data.tid = res.data.typeEntity.tname;
        })
        .catch((error) => {
          this.$message.error(error.message);
        });
      axios
        .getNd(this.data.nid)
        .then((res) => {
          this.data.nid = res.data.ndEntity.nname;
        })
        .catch((error) => {
          this.$message.error(error.message);
        });
      axios
        .getSid(this.data.sid)
        .then((res) => {
          this.data.sid = res.data.subjectDTO.sname;
        })
        .catch((error) => {
          this.$message.error(error.message);
        });
    },
  },
  mounted() {
    this.getdata();
    // this.AList();
  },
};
</script>
<style scoped>
p{
  font-size: 25px !important;
}
img {
  max-height: 200px;
  max-width: 200px;
}
/* table 样式 */

/* table {
    border-top: 1px solid #ccc;
    border-left: 1px solid #ccc;
} */
/* 
table td, table th {
    border-bottom: 1px solid #ccc;
    border-right: 1px solid #ccc;
    padding: 3px 5px;
}

table th {
    border-bottom: 2px solid #ccc;
    text-align: center; */
/* } */

/* blockquote 样式 */
.boxs_ti{
    padding-left: 3%;
    background-color: whitesmoke;
    min-height: 100px;
    max-height: 600px;
    font-size: 20px;
    font-family: cursive;
    overflow:auto;
    border-radius:25px;
}
.box_daan{
    overflow:auto;
    width: 80%;
    height: 150px;
}
blockquote {
  display: block;
  border-left: 8px solid #d0e5f2;
  padding: 5px 10px;
  margin: 10px 0;
  line-height: 1.4;
  font-size: 100%;
  background-color: #f1f1f1;
}
/* code 样式 */
code {
  display: inline-block;
  *display: inline;
  *zoom: 1;
  background-color: rgb(239, 245, 252);
  border-radius: 3px;
  padding: 3px 5px;
  margin: 0 3px;
  word-break: break-all;
  overflow-x: auto;
  line-height: 22px;
}

pre code {
  display: block;
}

/* ul ol 样式 */

ul,
ol {
  margin: 10px 0 10px 20px;
}

.hljs {
  display: block;
  padding: 0.5em;
  background: #23241f;
}

.hljs,
.hljs-tag,
.css .hljs-rules,
.css .hljs-value,
.css .hljs-function .hljs-preprocessor,
.hljs-pragma {
  color: #000000;
}

.hljs-strongemphasis,
.hljs-strong,
.hljs-emphasis {
  color: #a8a8a2;
}

.hljs-bullet,
.hljs-blockquote,
.hljs-horizontal_rule,
.hljs-number,
.hljs-regexp,
.alias .hljs-keyword,
.hljs-literal,
.hljs-hexcolor {
  color: #ae81ff;
}

.hljs-tag .hljs-value,
.hljs-code,
.hljs-title,
.css .hljs-class,
.hljs-class .hljs-title:last-child {
  color: #c300ff;
}

.hljs-link_url {
  font-size: 80%;
}

.hljs-strong,
.hljs-strongemphasis {
  font-weight: bold;
}

.hljs-emphasis,
.hljs-strongemphasis,
.hljs-class .hljs-title:last-child {
  font-style: italic;
}

.hljs-keyword,
.hljs-function,
.hljs-change,
.hljs-winutils,
.hljs-flow,
.lisp .hljs-title,
.clojure .hljs-built_in,
.nginx .hljs-title,
.tex .hljs-special,
.hljs-header,
.hljs-attribute,
.hljs-symbol,
.hljs-symbol .hljs-string,
.hljs-tag .hljs-title,
.hljs-value,
.alias .hljs-keyword:first-child,
.css .hljs-tag,
.css .unit,
.css .hljs-important {
  color: #f92672;
}

.hljs-function .hljs-keyword,
.hljs-class .hljs-keyword:first-child,
.hljs-constant,
.css .hljs-attribute {
  color: #66d9ef;
}

.hljs-variable,
.hljs-params,
.hljs-class .hljs-title {
  color: #030303;
}

.hljs-string,
.css .hljs-id,
.hljs-subst,
.haskell .hljs-type,
.ruby .hljs-class .hljs-parent,
.hljs-built_in,
.sql .hljs-aggregate,
.django .hljs-template_tag,
.django .hljs-variable,
.smalltalk .hljs-class,
.django .hljs-filter .hljs-argument,
.smalltalk .hljs-localvars,
.smalltalk .hljs-array,
.hljs-attr_selector,
.hljs-pseudo,
.hljs-addition,
.hljs-stream,
.hljs-envvar,
.apache .hljs-tag,
.apache .hljs-cbracket,
.tex .hljs-command,
.hljs-prompt,
.hljs-link_label,
.hljs-link_url {
  color: rgb(255, 51, 0);
}

.hljs-comment,
.hljs-javadoc,
.java .hljs-annotation,
.python .hljs-decorator,
.hljs-template_comment,
.hljs-pi,
.hljs-doctype,
.hljs-deletion,
.hljs-shebang,
.apache .hljs-sqbracket,
.tex .hljs-formula {
  color: rgb(106, 153, 85);
}

.coffeescript .javascript,
.javascript .xml,
.tex .hljs-formula,
.xml .javascript,
.xml .vbscript,
.xml .css,
.xml .hljs-cdata,
.xml .php,
.php .xml {
  opacity: 0.5;
}
</style>
